<!-- <div nz-row style='border-bottom: 1px solid rgba(238, 238, 238, 1); margin-bottom: 0.4rem;'>
  <div class="title" nz-col nzSpan="10">
    <div nz-col nzSpan="9">
      <label for="">{{"EquipmentManagement.vmsModal.Illum_Mode" | translate}}</label>
    </div>
    <div nz-col nzSpan="14">
      <nz-select [(ngModel)]="vmsgetData.Illum_Mode" nzShowSearch nzAllowClear [nzPlaceHolder]="'' | translate"
        id="type" style="width: 90%">
        <nz-option [nzLabel]="item.name" [nzValue]="item.value" *ngFor="let item of illumModeList"></nz-option>
      </nz-select>
    </div>
  </div>
  <div class="title" nz-col nzSpan="10">
    <div nz-col nzSpan="9">
      <label for="">{{"EquipmentManagement.vmsModal.Illum_Level" | translate}}</label>
    </div>
    <div nz-col nzSpan="14">
      <nz-input-number [(ngModel)]="vmsgetData.Illum_Level" [nzMin]="1" [nzMax]="10" [nzStep]="1" [nzPrecision]="0"
        style="width: 90%"></nz-input-number>
    </div>
  </div>
  <div class="title" nz-col nzSpan="4">
    <div nz-col nzSpan="20">
      <label for="">{{"EquipmentManagement.vmsModal.Illum_Num_Level" | translate}}:</label>
    </div>
    <div nz-col nzSpan="4">
      <div>
        {{vmsgetData.Illum_Num_Level}}
      </div>
    </div>
  </div>

</div> -->

<div class="vmsSetContainer">
  <div nz-row nzType="flex" nzJustify="space-between">
    <div nz-col nzSpan="13" class="VMSTable">
      <nz-table #headerTable [nzData]="allMessageData" [nzPageSize]="allMessageData.length"  [nzShowPagination]="false" [nzScroll]="{y: '240px' }">
        <thead>
          <tr class="tableHead">
            <th>{{"EquipmentManagement.vmsModal.Message" | translate}}</th>
            <th>{{"EquipmentManagement.vmsModal.Content" | translate}}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of headerTable.data" (click)="clickTR(data)">
            <td>
              <div style="width: 1.1rem;height:0.4rem;display: flex;justify-content: center;align-items: center;">
                <img [src]="data.message+'?'+now" alt="" style="max-width: 100%;max-height:100%">
              </div>
            </td>
            <td>
              <div class="tableText">{{ data.content }}</div>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
    <div nz-col nzSpan="11">
      <div class="VMSboard">
        <div class="page-toolbar">
          <div class="page" *ngIf="currentPageImgs.length===0">Page1</div>
          <div class="page" [ngClass]="currentPage === i ? 'page-active' : ''"
            *ngFor="let item of currentPageImgs;index as i" (click)="goToPage('current', i)">Page{{i+1}}</div>
          <div class="pageStatus">{{"Current" | translate}}</div>
        </div>
        <div class="VMSboard-content">
          <img [src]="currentPageImgs[currentPage]" alt="">
        </div>
      </div>
      <div class="VMSboard">
        <div class="page-toolbar">
          <div class="page" *ngIf="previewPageImgs.length===0">Page1</div>
          <div class="pageStatus">{{"Preview" | translate}}</div>
          <div class="page" [ngClass]="previewPage === i ? 'page-active' : ''"
            *ngFor="let item of previewPageImgs;index as i" (click)="goToPage('preview', i)">Page{{i+1}}</div>
          <div class="pageStatus">{{"Preview" | translate}}</div>
        </div>
        <div class="VMSboard-content">
          <img [src]="previewPageImgs[previewPage]+ '?' + now"" alt="">
        </div>
      </div>
    </div>
  </div>
</div>